$borderColor: #ddd;
$fontColor: #fff;
#functool {
  left: 80px;
  display: flex;
  flex-direction: column;
  position: relative;

  &:hover > .functool-control {
    display: flex;
  }
}

.functool-canvas {
  border: solid 3px $borderColor;
  box-shadow: 2px 2px 5px rgba($color: #000000, $alpha: 0.1);
  width: 100%;
}

.functool-control {
  display: none;
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -10%);
  background: #fff;
  box-shadow: 2px 2px 5px rgba($color: #000, $alpha: 0.1);
  flex-direction: column;
  border: solid 2px $borderColor;
  width: 280px;
  padding: 10px;
  box-sizing: border-box;
  user-select:none; 
  bottom: 0;
  left: 50%;

  .functool-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;

    .functool-express {
      outline: none;
      width: 100px;
      border-radius: 20px;
      border: 2px solid $borderColor;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .functool-x-start, .functool-x-end {
      border-radius: 10px;
      width: 50px;
      border: 2px solid $borderColor;
      padding-left: 10px;
      outline: none;
    }
  }

  .functool-button {
    display: flex;
    justify-content: space-between;

    &>[class^="functool-"] {
      padding: 7px;
      padding-left: 10px;
      padding-right: 10px;
      color: $fontColor;
      cursor: pointer;
      border-radius: 5px;
      font-size: 14px;
    }
    
    .functool-draw-button {
      background: #0984e3;
    }
    .functool-zoom-in {
      background: #6c5ce7;
    }
    .functool-zoom-out {
      background: #e17055;
    }
    .functool-back-axis {
      background: #00b894;
    }
  }
}